<template>
  <div class="page_auto_warp">
    <div class="video_wrap">
      <h3 class="video_wrap_title">西瓜视频播放器DEMO</h3>

      <div class="video__main">
        <div id="mse"></div>
      </div>
    </div>
  </div>

</template>

<script setup>
import Player from 'xgplayer'
import Danmu from 'xgplayer/es/plugins/danmu'
import 'xgplayer/dist/index.min.css'

const videoUrl = [
  '//www.runoob.com/try/demo_source/movie.mp4',
  '//lf3-static.bytednsdoc.com/obj/eden-cn/nupenuvpxnuvo/xgplayer_doc/xgplayer-demo.mp4'
]

const config = {
  id: 'mse',
  url: videoUrl[1],
  height: '100%',
  width: '100%',
  plugins: [Danmu],
  progressDot: [
    {
      time: 3,
      text: "aaaaaaa",
      style: {       // 指定样式
        backgroundColor: 'blue'
      }
    },
    {
      time: 6,
      text: "ttttttttt",
      style: {       // 指定样式
        backgroundColor: 'blue'
      }
    },
  ],
  danmu: {
    comments: [
      {
        duration: 15000,
        id: "2",
        start: 3000,
        color: true,
        txt: "1111111111111111",
        style: {
          color: '#58bb26',
          fontSize: '24px',
          padding: '2px 10px'
        }
      },
      {
        duration: 15000,
        id: "3",
        start: 3500,
        color: true,
        txt: "2222222222222222",
        style: {
          color: '#58bb26',
          fontSize: '24px',
          padding: '2px 10px'
        }
      },
      {
        duration: 15000,
        id: "4",
        start: 4000,
        color: true,
        txt: "3333333333333333",
        style: {
          color: '#58bb26',
          fontSize: '24px',
          padding: '2px 10px'
        }
      },
    ],
    area: {
      start: 0,
      end: 1
    },
  }
}

onMounted(() => {
  let player = new Player(config);
})
</script>

<style scoped lang="scss">
.video_wrap {
  padding: 10px;
  background-color: #FFFFFF;
  height: 100%;


  .video__main {
    padding-top: 20px;
    margin: 0 auto;
    width: 80%;
    height: 500px;

    #mse {
      width: 100%;
      height: 100%;
      background-color: #181818;
    }
  }
}
</style>
